import React from 'react';
import { findDOMNode } from 'react-dom';
import './style.css';
// service
import { Git, SynchronousTitle } from '../../util/service';
// event
import emitter from '../../util/events';
// ant
import { Form, Input, Select, Tag, Checkbox, Row, Col, Button } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;


class BaseForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
        this.AccountNumber = null;
        this.Site = null;
        this.ShopFirstClassification = null;
        this.ShopSecondClassification = null;
        this.ProductStatus = null;
        this.Counter = null;
        this.Tag = [];
        this.showModal = this.showModal.bind(this);
        this.SynchronousTitle = this.SynchronousTitle.bind(this);
    }

    componentDidMount() {
        // data事件通讯
        emitter.addListener('setFormData', () => {
            this.props.form.validateFieldsAndScroll((errors, values) => {
                if (!errors) {
                    this.props.onChange({
                            base: this.props.form.getFieldsValue()
                    })
                } else {
                    this.props.onChange(false)
                }
                if(this.Tag.length === 0) {
                    this.KeywordError = "error";
                    this.KeywordHelp = "error";
                }
            })
        });
        // 获取翻译数据
        emitter.addListener('tanslateData', (data) => {
            this.props.form.setFieldsValue({
                Heading: data.TanslateText
            })
        })
        // 获取基础数据
        Git({id: 123456})
            .then((reponse) => {
                for(let key in reponse.Data){
                    if(key === 'Keyword') {
                        // .map(d => <Tag color="#108ee9" closable key={d}>{d}</Tag>)
                        this.Tag = reponse.Data[key];
                    } else if(reponse.Data[key] instanceof Array) {
                        this[key] = reponse.Data[key].map(d => <Option key={d}>{d}</Option>);
                    }
                }

                for(let key in this.props.form.getFieldsValue()){
                    this.props.form.setFieldsValue({
                        [key]: reponse.Data[key]
                    })
                }
            })
        // input onInput
        function setInputEvent(inputEle) {
            inputEle.addEventListener('input', () => {
                inputEle.nextSibling.querySelector('.now').innerHTML = inputEle.value.length
            })
        }
        let inputEle = findDOMNode(this.refs.Heading);
        setInputEvent(inputEle)
        inputEle = findDOMNode(this.refs.Subheading);
        setInputEvent(inputEle)
    }
    // 显示modal
    showModal(e) {
        var data = JSON.parse(e.target.value);
        emitter.emit('showModal', data);
    }
    // 同步标题
    SynchronousTitle() {
        SynchronousTitle(123456)
            .then(response => {
                this.props.form.setFieldsValue({
                    Heading: response.Data.title
                })
            })
    }
    // 关键词enter
    KeywordEnter = (e) => {
        let value = this.props.form.getFieldValue('KeywordValue');
        if(this.Tag.indexOf(value) < 0 && value.trim() !== '') {
            this.Tag.push(value);
        }
        this.props.form.resetFields('KeywordValue')
        if(this.Tag.length > 0) {
            this.KeywordError = null;
            this.KeywordHelp = null;
        }
    }
    // tabClose
    tabClose = (e) => {
        let target = e.target;
        this.Tag = this.Tag.filter((el, index) => el !== target.parentNode.innerText)
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {
                sm: {
                    span: 5
                }
            },
            wrapperCol: {
                sm: {
                    span: 18
                }
            }
        };

        return (
            <div>
                <FormItem label="SKU" {...formItemLayout}>
                    <Row gutter={8}>
                        <Col span={8}>
                            {getFieldDecorator('ProductCode', {
                                rules: [
                                    {
                                        required: true,
                                        message: '必填'
                                    }
                                ]
                            })(<Input placeholder="请输入"/>)}
                        </Col>
                    </Row>
                </FormItem>
                <FormItem label="账号" {...formItemLayout}>
                    <Row gutter={8}>
                        <Col span={8}>
                            {getFieldDecorator('AccountNumberValue', {
                                rules: [
                                    {
                                        required: true,
                                        message: '必填'
                                    }
                                ]
                            })(
                                <Select 
                                    showSearch 
                                    className="w100" 
                                    placeholder="请选择">
                                    {this.AccountNumber}
                                </Select>
                            )}
                        </Col>
                    </Row>
                </FormItem>
                <FormItem label="站点" {...formItemLayout}>
                    <Row gutter={8}>
                        <Col span={8}>
                            {getFieldDecorator('SiteValue', {
                                rules: [
                                    {
                                        required: true,
                                        message: '必填'
                                    }
                                ]
                            })(
                                <Select 
                                    showSearch 
                                    className="w100" 
                                    placeholder="请选择">
                                    {this.Site}
                                </Select>
                            )}
                        </Col>
                    </Row>
                </FormItem>
                <FormItem label="标题" {...formItemLayout}>
                    <Row gutter={8}>
                        <Col span={20}>
                            {getFieldDecorator('Heading', {
                                rules: [
                                    {
                                        required: true,
                                        message: '必填'
                                    },
                                    {
                                        max: 80,
                                        message: '最大字符80'
                                    }
                                ]
                            })(
                            <div>
                                <Input placeholder="请输入" ref="Heading"/>
                                <span className="maxlength"><span className="now">0</span>/80</span>
                            </div>)}
                        </Col>
                        <Col span={4}>
                            <Button type="primary" className="mr5" onClick={this.SynchronousTitle}>同</Button>
                            <Button type="primary" value='{"type": "Translate", "data": 1}' onClick={this.showModal}>译</Button>
                        </Col>
                    </Row>
                </FormItem>
                <FormItem label="副标题（收费）" {...formItemLayout}>
                    <Row gutter={8}>
                        <Col span={20}>
                            {getFieldDecorator('Subheading', {
                                rules: [
                                    {
                                        max: 55,
                                        message: '最大字符55'
                                    }
                                ]
                            })(
                                <div>
                                    <Input ref="Subheading"/>
                                    <span className="maxlength"><span className="now">0</span>/55</span>
                                </div>
                            )}
                        </Col>
                    </Row>
                </FormItem>
                <FormItem label="第一分类" {...formItemLayout}>
                    <Row gutter={8}>
                        <Col span={20}>
                            {getFieldDecorator('FirstClassification', {
                                rules: [
                                    {
                                        required: true,
                                        message: '必填'
                                    }
                                ]
                            })(<Input placeholder="请选择" disabled={true}/>)}
                        </Col>
                        <Col span={4}>
                            <Button type="primary" value='{"type": "ChooseClass", "data": 1}' onClick={this.showModal}>选择</Button>
                        </Col>
                    </Row>
                </FormItem>
                <FormItem label="第二分类（收费）" {...formItemLayout}>
                    <Row gutter={8}>
                        <Col span={20}>
                            {getFieldDecorator('SecondClassification', {
                                rules: [
                                    {
                                        required: true,
                                        message: '必填'
                                    }
                                ]
                            })(<Input placeholder="请选择" disabled={true}/>)}
                        </Col>
                        <Col span={4}>
                            <Button type="primary" value='{"type": "ChooseClass", "data": 2}' onClick={this.showModal}>选择</Button>
                        </Col>
                    </Row>
                </FormItem>
                <FormItem label="店铺第一分类" {...formItemLayout}>
                    <Row gutter={8}>
                        <Col span={20}>
                            {getFieldDecorator('ShopFirstClassificationValue', {
                                rules: [
                                    {
                                        required: true,
                                        message: '必填'
                                    }
                                ]
                            })(
                                <Select 
                                    showSearch
                                    className="w100" 
                                    placeholder="请选择">
                                    {this.ShopFirstClassification}
                                </Select>
                            )}
                        </Col>
                        <Col span={4}>
                            <Button type="primary">同步</Button>
                        </Col>
                    </Row>
                </FormItem>
                <FormItem label="店铺第二分类" {...formItemLayout}>
                    <Row gutter={8}>
                        <Col span={20}>
                            {getFieldDecorator('ShopSecondClassificationValue', {
                                rules: [
                                    {
                                        required: true,
                                        message: '必填'
                                    }
                                ]
                            })(
                                <Select 
                                    showSearch
                                    className="w100" 
                                    placeholder="请选择">
                                    {this.ShopSecondClassification}
                                </Select>
                            )}
                        </Col>
                    </Row>
                </FormItem>
                <FormItem label="产品状态" {...formItemLayout}>
                    <Row gutter={8}>
                        <Col span={8}>
                            {getFieldDecorator('ProductStatusValue', {
                                rules: [
                                    {
                                        required: true,
                                        message: '必填'
                                    }
                                ]
                            })(
                                <Select
                                    showSearch
                                    className="w100" 
                                    placeholder="请选择">
                                    {this.ProductStatus}
                                </Select>
                            )}
                        </Col>
                    </Row>
                </FormItem>
                <FormItem label="计数器" {...formItemLayout}>
                    <Row gutter={8}>
                        <Col span={8}>
                            {getFieldDecorator('CounterValue', { rules: [] })(
                                <Select 
                                    showSearch 
                                    className="w100" 
                                    placeholder="请选择">
                                    {this.Counter}
                                </Select>
                            )}
                        </Col>
                    </Row>
                </FormItem>
                <FormItem 
                    label="关键字" {...formItemLayout} 
                    validateStatus={this.KeywordError}
                    help={this.KeywordHelp}>
                    <Row gutter={8}>
                        <Col span={8}>
                            {getFieldDecorator('KeywordValue')(
                                <Input placeholder="请输入" onPressEnter={this.KeywordEnter}/>
                            )}
                        </Col>
                    </Row>
                    <Row>
                        <div>
                            {
                                this.Tag.map((el, index) => {
                                    return <Tag color="#108ee9" closable key={el} onClose={this.tabClose}>{el}</Tag>
                                })
                            }
                        </div>
                    </Row>
                </FormItem>
                <FormItem label="销售记录隐私保护" {...formItemLayout}>
                    {getFieldDecorator('PrivacyProtectionOfSalesRecords', { valuePropName: 'checked' })(<Checkbox />)}
                </FormItem>
            </div>
        )
    }
}

export default Form.create()(BaseForm)